<template>
  <div class="article-item">
    <div class="article-item-inner">
      <div class="article-body">
        <div class="user-info">
          <Avatar
            :userId="data.userId"
            :width="30"
          ></Avatar>
          <router-link
            :to="`/user/${data.userId}`"
            class="link-info"
          >{{ data.nickName }}</router-link>
          <el-divider direction="vertical"></el-divider>
          <div class="post-time">{{ data.postTime }}</div>
          <div class="address">&nbsp;-&nbsp;{{ data.userIpAddress }}</div>
          <el-divider direction="vertical"></el-divider>
          <router-link
            :to="`/forum/${data.pBoardId}`"
            class="link-info"
          >{{ data.pBoardName }}</router-link>
          <template v-if="data.boardName">
            <span>&nbsp;/&nbsp;</span>
            <router-link
              :to="`/forum/${data.pBoardId}/${data.boardId}`"
              class="link-info"
            >{{ data.boardName
            }}</router-link>
          </template>
        </div>
        <router-link
          :to="`/post/${data.articleId}`"
          class="title"
        >
          <span
            class="top"
            v-if="data.topType == 1"
          >置顶</span>
          <span
            v-if="data.status == 0"
            class="tag tag-no-audit"
          >待审核</span>
          <span
            v-if="htmlTitle"
            v-html="data.title"
          ></span>
          <span v-else>{{ data.title }}</span>
        </router-link>
        <div class="summary">{{ data.summary }}</div>
        <div class="article-info">
          <span class="iconfont icon-eye-solid">
            {{ data.readCount == 0 ? "阅读" : data.readCount }}
          </span>
          <span class="iconfont icon-good">
            {{ data.goodCount == 0 ? "点赞" : data.goodCount }}
          </span>
          <span
            class="iconfont icon-comment"
            v-if="showComment"
          >
            {{ data.commentCount == 0 ? "评论" : data.commentCount }}
          </span>
          <span
            v-if="showEdit"
            class="iconfont icon-edit"
            @click="editArticle(data.articleId)"
          >编辑</span>
        </div>
      </div>
      <router-link :to="`/post/${data.articleId}`">
        <Cover
          :cover="data.cover"
          :width="100"
        ></Cover>
      </router-link>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
const router = useRouter();
const props = defineProps({
  data: {
    type: Object
  },
  // 是否展示评论
  showComment: {
    type: Boolean,
  },
  // 是否可编辑
  showEdit: {
    type: Boolean,
  },
  htmlTitle: {
    type: Boolean,
    default: false
  }
})

const editArticle = (articleId) => {
  router.push(`/editPost/${articleId}`)
}
</script>

<style lang="scss">
.article-item {
  padding: 5px 15px;

  .article-item-inner {
    padding: 10px 0px;
    border-bottom: 1px solid #ddd;
    display: flex;

    .article-body {
      flex: 1;

      .user-info {
        display: flex;
        align-items: center;
        font-size: 14px;

        .post-time {
          font-size: 13px;
        }

        .link-info {
          margin-left: 5px;
          color: #494949;
        }

        .link-info:hover {
          color: var(--link);
        }


      }

      .title {
        font-weight: bold;
        font-size: 16px;
        color: #4a4a4a;
        display: inline-block;
        margin: 10px 0px;

        .top {
          font-weight: normal;
          border: 1px solid var(--pink);
          border-radius: 5px;
          font-size: 12px;
          color: var(--pink);
          padding: 0px 5px;
          margin-right: 3px;
        }
      }

      .summary {
        font-size: 14px;
        color: #86909c;
      }

      .article-info {
        display: flex;
        align-items: center;
        margin-top: 10px;
        font-size: 13px;

        .iconfont {
          color: #86909c;
          margin-right: 25px;
          font-size: 14px;
        }

        .icon-edit {
          cursor: pointer;
          color: var(--link);
        }

        .iconfont:before {
          padding-right: 3px;
        }
      }
    }
  }
}

.article-item:hover {
  background: #fdfdfd;
}
</style>
